<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="top-panel">
      <view class="header">
        <u-icon name="arrow-left" size="40" color="#333" @click="goBack" class="back-button"></u-icon>
        <text class="title">体检预约</text>
      </view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-bar">
      <input type="text" placeholder="搜索体检套餐或机构" class="search-input"/>
    </view>
    <br>
    <!-- 我的体检报告 -->
    <view class="report-section">
      <image src="/static/temp/我的体检报告.png" class="report-image"/>
    </view>
    <br>
    <!-- 选项卡切换 -->
    <view class="tab-bar">
      <text :class="{ 'active': currentTab === 'nearby' }" @tap="switchTab('nearby')">附近机构</text>
      <text :class="{ 'active': currentTab === 'package' }" @tap="switchTab('package')">精选套餐</text>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <view v-if="currentTab === 'nearby'" class="nearby-list">
        <view class="item" v-for="(item, index) in nearbyData.rows" :key="index" @click="navigateToDetails(item.id)">
          <image :src="item.logo ? '/static/' + item.logo : '/static/placeholder.png'" class="item-image"/>
          <image src="/static/icon/rikki.jpg" class="item-tag"/>
          <view class="item-info">
            <text class="item-type">{{ item.hospitalType }}</text>
            <text class="item-title">{{ " " + " " + item.name }}</text>
            <br><br>
            <text class="item-address">{{ item.address }}</text>
          </view>
        </view>
      </view>
      <view v-if="currentTab === 'package'" class="package-list">
        <view class="item" v-for="(item, index) in packageData.rows" :key="index">
          <image :src="item.logo ? '/static/' + item.logo : '/static/placeholder.png'" class="item-image"/>
          <image src="/static/icon/rikki.jpg" class="item-tag"/>
          <view class="item-info">
            <text class="item-type">{{ item.hospitalType }}</text>
            <text class="item-title">{{ " " + " " + " " + " " + item.packageName }}</text>
            <text class="item-level">{{ item.hospitalLevel }}</text>
            <text class="item-price">¥{{ item.price }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'nearby', // 默认显示附近机构
      nearbyData: { rows: [] }, // 初始化为带 rows 的对象
      packageData: { rows: [] } // 初始化为带 rows 的对象
    };
  },
  onLoad() {
    // 页面加载时自动请求附近机构数据
    this.getHospital();
  },
  methods: {
    switchTab(tab) {
      this.currentTab = tab;
      if (tab === 'nearby' && this.nearbyData.rows.length === 0) {
        this.getHospital(); // 切换到附近机构时检查数据并请求
      } else if (tab === 'package' && this.packageData.rows.length === 0) {
        this.getPackage(); // 切换到精选套餐时检查数据并请求
      }
    },
    getHospital() {
      uni.request({
        url: 'http://localhost:8080/app/hospital/list',
        method: 'GET',
        success: (res) => {
          if (res.data && res.data.rows) {
            this.nearbyData = res.data; // 直接赋值整个响应数据
          } else {
            console.error('数据格式错误', res.data);
            this.nearbyData = { rows: [] }; // 防止 undefined
          }
        },
        fail: (err) => {
          console.error('请求失败', err);
          this.nearbyData = { rows: [] }; // 失败时置空
        }
      });
    },
    getPackage() {
      uni.request({
        url: 'http://localhost:8080/app/package/list',
        method: 'POST',
        data: JSON.stringify({
          pageNum: 1, // 分页参数
          pageSize: 10
        }),
        header: {
          'Content-Type': 'application/json;charset=UTF-8'
        },
        success: (res) => {
          console.log('响应数据:', res.data); // 调试日志
          if (res.data && res.data.rows) {
            this.packageData = res.data; // 直接赋值整个响应数据
          } else {
            console.error('数据格式错误', res.data);
            this.packageData = { rows: [] }; // 防止 undefined 或格式错误
          }
        },
        fail: (err) => {
          console.error('请求失败', err);
          this.packageData = { rows: [] }; // 失败时置空
        }
      });
    },
    goBack() {
      uni.navigateBack(); // 返回上一级页面
    },
    navigateToDetails(hospitalId) {
      console.log('跳转到详情，hospitalId:', hospitalId);
      uni.navigateTo({
        url: `/pages/physical/details?hospitalId=${hospitalId}`
      });
    }
  }
};
</script>

<style>
.container {
  padding: 20rpx;
  height: 100vh;
  overflow: hidden;
}

.top-panel {
  background-color: #fff;
  padding: 10rpx 20rpx;
  border-bottom: 1rpx solid #eee;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.back-button {
  position: absolute;
  left: 10rpx;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

.search-bar {
  margin: 20rpx 0;
}

.search-input {
  width: 100%;
  height: 60rpx;
  padding: 10rpx;
  border: 1rpx solid #ccc;
  border-radius: 5px;
}

.report-section {
  margin-bottom: 20rpx;
  text-align: center;
}

.report-image {
  width: 600rpx;
  height: 200rpx;
  border-radius: 12rpx;
}

.tab-bar {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.tab-bar text {
  font-size: 32rpx;
  padding: 10rpx 20rpx;
}

.tab-bar .active {
  color: #007AFF;
  border-bottom: 2rpx solid #007AFF;
}

.content {
  min-height: calc(100vh - 300rpx);
  overflow-y: auto;
}

.nearby-list, .package-list {
  width: 100%;
}

.item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
  position: relative;
}

.item-image {
  width: 100rpx;
  height: 100rpx;
  margin-right: 20rpx;
}

.item-info {
  flex: 1;
}

.item-title {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
}

.item-address {
  font-size: 26rpx;
  color: #666;
  margin-top: 5rpx;
}

.item-type {
  font-size: 24rpx;
  margin-top: 5rpx;
  background-color: #6cf;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  display: inline-block;
}

.item-level {
  font-size: 24rpx;
  color: #666;
  margin-top: 5rpx;
  display: block;
}

.item-tag {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  position: absolute;
  left: 20rpx;
  top: 50%;
  transform: translateY(-50%);
}

.item-price {
  font-size: 40rpx;
  color: #FF4444;
  margin-top: 5rpx;
  display: block;
}
</style>